// $(function () {
//     load()
//     $('#title').on('keydown', function (e) {
//         if (e.keyCode === 13) {
//           if($(this).val() ==='') {
//             alert('请输入内容')
//           }else {
//             var local = getDate()
//             local.push({ title: $(this).val(), done: false })
//             saveDate(local)
//             load()
//             $(this).val('')
//           }
//         }
//     })
//     // jq的事件委派给未来动态创建的所有a绑定点击事件
//     $('ol,ul').on('click','a',function() {
//         // 获取本地数据
//         var data = getDate()
//         // 修改数据 
//         var index = $(this).attr('id')
//        data.splice(index,1) 
//         // 修改后的数据重新保存回本地
//         saveDate(data)
//         // 重新渲染
//         load()
//     })

//     $('ol,ul').on('click','input',function() {
//         // 获取本地数据
//        var data =  getDate()
//         // 修改数据
//         var index =  $(this).siblings('a').attr('id')
//         data[index].done = $(this).prop('checked')
//         // 保存回本地
//          saveDate(data)
//         // 重新渲染
//            load()
//     })

//     function getDate() {
//         var data = localStorage.getItem('todolist')
//         if (data !== null) {
//             return JSON.parse(data)
//         } else {
//             return [];
//         }
//     }
//     function saveDate(data) {
//         localStorage.setItem('todolist', JSON.stringify(data))

//     }

//     function load () {

//         var data = getDate()
//         // 渲染数据前先清除原先ol 和ul 里的数据
//         $('ol ,ul').empty()
//         var todocount = 0
//         var donecount = 0
//         $.each(data,function(i,e) {
//             // 渲染界面时 如果数据里的done属性为true则
//             if(e.done) {
//                 // 为true时默认选中checked
//            $('ul').prepend('<li><input type="checkbox" checked="checked"><p>'+e.title+'</p><a href="javascript:;" id = '+i+'></a></li>')
//                    donecount++

//             }else {
//                 $('ol').prepend('<li><input type="checkbox"><p>'+e.title+'</p><a href="javascript:;" id = '+i+'></a></li>')
//                    todocount++
//             }

//         })
//         $('#donecount').text(donecount)
//         $('#todocount').text(todocount)
//     }

// })


// $(function () {
//     load()
//     $('#title').on('keydown', function (e) {
//         if (e.keyCode === 13) {
//             if ($(this).val() == '') {
//                 alert('请输入内容')
//             } else {
//                 var local = getDate()
//                 local.push({
//                     title: $(this).val(), done: false
//                 })
//                 saveDate(local)
//                 load()
//                 $(this).val('')
//             }

//         }
//     })

//     $('ol,ul').on('click', 'a', function () {
//         var data = getDate()
//         var index = $(this).attr('id')
//         data.splice(index, 1)
//         saveDate(data)
//         load()


//     })
//     $('ol,ul').on('click', 'input', function () {

//         var data = getDate()
//         var index = $(this).siblings('a').attr('id')

//         // 这里把当前复选框的状态赋值给了数据里的done属性 done有了真假状态后 真则渲染到ul里 假就渲染ol里
//         data[index].done = $(this).prop('checked')
//         saveDate(data)
//         load()
//     })

//     function getDate() {
//         var data = localStorage.getItem('todoList')
//         if (data !== null) {
//             return JSON.parse(data)
//         } else {
//             return []
//         }
//     }

//     function saveDate(data) {
//         localStorage.setItem('todoList', JSON.stringify(data))
//     }


//     function load() {
//         var data = getDate()
//         $('ol,ul').empty()
//         var todocount = 0
//         var donecount = 0
//         $.each(data, function (i, n) {
//             // 如果done属性为真
//             if (n.done) {
//                 $('ul').prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
//                 donecount++
//                 // 为假
//             } else {
//                 $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
//                 todocount++
//             }

//         })
//         $('#donecount').text(donecount)
//         $('#todocount').text(todocount)



//     }

// })



// 1.键盘按下事件
// 入口函数
// $(function () {
//     load()
//     $('#title').on('keydown', function (e) {
//         if (e.keyCode === 13) {
//             if ($(this).val() == '') {
//                 alert('请输入内容')
//             } else {
//                 var local = getDate()
//                 local.push({
//                     title: $(this).val(), done: false
//                 })
//                 saveDate(local)
//                 load()
//                 $(this).val('')
//             }
//         }
//     })
//     $('ol,ul').on('click', 'a', function () {
//         var data = getDate()
//         var index = $(this).attr('id')
//         data.splice(index, 1)
//         saveDate(data)
//         load()
//     })
//     $('ol,ul').on('click', 'input', function () {
//         var data = getDate()
//         var index = $(this).siblings('a').attr('id')
//         data[index].done = $(this).prop('checked')
//         saveDate(data)
//         // 渲染要等到追加好了在写上
//         load()
//     })
//     function getDate() {
//         var data = localStorage.getItem('todolist')
//         if (data !== null) {
//             return JSON.parse(data)
//         } else {
//             return []
//         }
//     }
//     function saveDate(data) {
//         localStorage.setItem('todolist', JSON.stringify(data))
//     }

//     function load() {
//         var doneCount = 0
//         var todoCount = 0
//         var data = getDate()
//         $('ol,ul').empty()
//         $.each(data, function (i, n) {
//             if (n.done) {
//                 $('ul').prepend('<li><input type="checkbox" checked= "checked"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
//                 doneCount++

//             } else {
//                 $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
//                 todoCount++
//             }
//         })
//         $('#donecount').text(doneCount)
//         $('#todocount').text(todoCount)

//     }


// })


$(function () {
    load()
    $('#title').on('keydown', function (e) {
        if (e.keyCode === 13) {
            if ($(this).val() == '') {
                alert('请输入内容')
            } else {
                var local = getDate()
                local.push({
                    title: $(this).val(), done: false
                })
                saveDate(local)
                load()
                $(this).val('')

            }
        }
    })
    $('ol,ul').on('click', 'a', function () {
        var data = getDate()
        var index = $(this).attr('id')
        data.splice(index, 1)
        saveDate(data)
        load()
    })
    $('ol,ul').on('click', 'input', function () {
        var data = getDate()
        var index = $(this).siblings('a').attr('id')
        data[index].done = $(this).prop('checked')
        saveDate(data)
        load()

    })
    function getDate() {
        var data = localStorage.getItem('todoList')
        if (data !== null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    function saveDate(data) {
        localStorage.setItem('todoList', JSON.stringify(data))
    }
    function load() {
        var todocount = 0
        var donecount = 0
        var data = getDate()
        $('ol,ul').empty()
        $.each(data, function (i, n) {
            if (n.done) {
                $('ul').prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
                donecount++

            } else {
                $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href=javascript:; id=' + i + '></a></li>')
                todocount++
            }
        })
        $('#todocount').text(todocount)
        $('#donecount').text(donecount)

    }
})









